<template>
  <BasicModal
    destroy-on-close
    width="700px"
    title="添加收款信息"
    @register="register"
    @ok="handleSubmit"
  >
    <a-form ref="formRef" :model="formState" :labelCol="{ span: 5 }">
      <a-form-item
        label="收款通道"
        name="code"
        :rules="[{ required: true, message: '请选择收款通道' }]"
      >
        <a-select
          v-model:value="formState.code"
          :fieldNames="{ label: 'title', value: 'code' }"
          @change="handleCodeChange"
          :options="codeList"
          @popup-scroll="handleScroll"
        />
      </a-form-item>
      <a-form-item
        v-for="(item, index) in codeInfo?.receives.input"
        :key="index"
        :label="item.title"
        :name="item.title"
      >
        <a-input
          :name="item.title"
          v-model:value="formState.input[index]['value']"
          :placeholder="formState.input[index]['tip']"
        />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.bankStatus === '1'"
        label="请选择开户行"
        name="bank"
        :rules="[{ required: true, message: '请选择开户行' }]"
      >
        <a-select v-model:value="formState.bank" :options="bankList" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.maxMoneyStatus === '1'"
        label="单笔最大金额"
        name="maxMoney"
        :rules="[{ required: true, message: '请输入单笔最大金额' }]"
      >
        <a-input
          v-model:value="formState.maxMoney"
          :placeholder="codeInfo?.receives.maxMoneyDescribe"
        />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.minMoneyStatus === '1'"
        label="单笔最小金额"
        name="minMoney"
        :rules="[{ required: true, message: '请输入单笔最小金额' }]"
      >
        <a-input
          v-model:value="formState.minMoney"
          :placeholder="codeInfo?.receives.minMoneyDescribe"
        />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.limitMoneyStatus === '1'"
        label="单日收款金额"
        name="limitMoney"
        :rules="[{ required: true, message: '请输入单日收款金额' }]"
      >
        <a-input
          v-model:value="formState.limitMoney"
          :placeholder="codeInfo?.receives.limitMoneyDescribe"
        />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.limitNumberStatus === '1'"
        label="单日收款笔数"
        name="limitNumber"
        :rules="[{ required: true, message: '请输入单日收款笔数' }]"
      >
        <a-input
          v-model:value="formState.limitNumber"
          :placeholder="codeInfo?.receives.limitNumberDescribe"
        />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.regularNumberStatus === '1'"
        label="收款固额设定"
        name="regularNumber"
        :rules="[{ required: true, message: '请输入收款固额设定' }]"
      >
        <a-input
          v-model:value="formState.regularNumber"
          :placeholder="codeInfo?.receives.regularNumberDescribe"
        />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.receives.IntraCity === '1'"
        label="同城匹配"
        name="city"
        :rules="[{ required: true, message: '请选择同城匹配' }]"
      >
        <a-row :gutter="6">
          <a-col :span="12">
            <a-select
              v-model:value="formState.province"
              :fieldNames="{ label: 'name', value: 'id' }"
              @change="loadCityData"
              :options="provinceList"
              placeholder="请选择省"
            />
          </a-col>
          <a-col :span="12">
            <a-select
              v-model:value="formState.city"
              :fieldNames="{ label: 'name', value: 'id' }"
              :options="cityList"
              placeholder="请选择市"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item
        v-if="codeInfo && codeInfo?.receives.agentImgStatus === '1'"
        :label="codeInfo?.receives.agentImgTitle"
        required
        :rules="[{ required: true, message: '请上传' + codeInfo?.receives.agentImgTitle }]"
        name="agentImgSrc"
      >
        <a-upload
          :max-count="1"
          v-model:file-list="fileList"
          list-type="picture"
          :beforeUpload="uploadFunc"
          @remove="handleFileRemove"
          style="width: 100%"
        >
          <a-button style="width: 100%" block type="primary">
            <upload-outlined />
            {{ codeInfo?.receives.agentButtonTitle }}
          </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item
        v-if="codeInfo && codeInfo?.receives.analysisStatus === '1'"
        :label="codeInfo?.receives.analysisTitle"
        required
        name="analysisSrc"
        :rules="[{ required: true, message: '请输入' + codeInfo?.receives.analysisTitle }]"
      >
        <a-input v-model:value="formState.analysisSrc" />
        <span v-html="codeInfo?.receives?.analysisContent"></span>
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { getCollectionApi, GetBanksApi, AddCollectionApi, GetAreaApi } from '@/api/collection';
  import message from '@/views/form-design/utils/message';
  import { uploadApi } from '@/api/sys/upload';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { onMounted, ref } from 'vue';

  const codeList = ref([]);
  const bankList = ref([]);
  const codeInfo = ref(null);
  const provinceList = ref([]);
  const cityList = ref([]);
  const formRef = ref(null);
  onMounted(() => {
    getCollectionApi({ page: 1, pageSize: 1000 }).then((res) => {
      codeList.value = res.list;
      // 复制一组

      codeList.value.map((item) => {
        item.code = item.ball.code.toString();
      });
    });
    GetBanksApi({}).then((res) => {
      bankList.value = res.list;
    });
    GetAreaApi({ id: '' }).then((res) => {
      provinceList.value = res.list;
    });
  });

  const formState = ref({
    code: null,
    input: null,
    maxMoney: null,
    minMoney: null,
    limitMoney: null,
    limitNumber: null,
    regularNumber: null,
    bank: null,
    province: null,
    city: null,
    agentImgSrc: null,
    analysisSrc: null,
    status: '0',
  });

  const fileList = ref([]);

  const [register, { closeModal }] = useModalInner();

  const handleCodeChange = (value, options) => {
    codeInfo.value = options;
    formState.value.input = options.receives.input;
  };

  const handleScroll = (e) => {
    console.log(e);
  };

  const loadCityData = (e) => {
    formState.value.city = null;
    GetAreaApi({ id: e }).then((res) => {
      cityList.value = res.list;
    });
    return true;
  };

  const handleSubmit = () => {
    for (let i = 0; i < formState.value?.input.length; i++) {
      if (
        formState.value?.input[i]?.value == undefined ||
        formState.value?.input[i]['value'] == ''
      ) {
        message.error('请输入' + formState.value?.input[i]['title']);
        return false;
      }
    }

    formRef.value
      .validate()
      .then(() => {
        const params = {
          ...formState.value,
          code: codeInfo.value?.receives.code,
        };

        // 删除空白属性params的空白属性
        Object.keys(params).forEach((key) => {
          if (params[key] === null || params[key] === undefined || params[key] === '') {
            delete params[key];
          }
        });

        AddCollectionApi(params).then(() => {
          message.success('添加成功');
          closeModal();
        });
      })
      .catch(() => {
        return false;
      });
  };

  const uploadFunc = (file) => {
    uploadApi({
      file: file,
      filename: file.name,
      data: {
        analysis: 1,
      },
    }).then((res) => {
      const { data } = res;
      if (data.code === 1) {
        fileList.value[0].status = 'done';
        fileList.value[0].response = data.data.file;
        formState.value.agentImgSrc = data.data.file.full_url;
        formState.value.analysisSrc = data.data.file.analysisSrc;
        message.success(data.msg);
      } else {
        fileList.value[0].status = 'error';
        message.error(data.msg);
      }
    });
    return false;
  };

  const handleFileRemove = () => {
    formState.value.agentImgSrc = null;
    formState.value.analysisSrc = null;
  };
</script>
<style scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-picture) {
    width: 100% !important;
  }
</style>
